<!-- 长列表 -->
<template>
  <div class="general-list-container">
      <div class="loading-section" :style="{height: listHeight  + 'px'}" v-if="!tableStartInit">
        <div id="lottie" ref="loading" class="h5-common-loading"></div>
        <div class="loading-text">加载中</div>
      </div>
        <win-table v-if="tableStartInit" :data="tableDataRes" virtual-scroll :sticky="true" 
          :sort-state="3"
          @sort-change="sortHandler"
          @row-click="rowClick"
          @proxy-horizontal-scroll="horizontalScroll"
          :default-sort-by="currentSortKey"
          :default-sort-order="currentSortStatus"
          :proxy-scroll="true" 
          :proxy-scroll-height="listHeight" 
          :virtual-item-height="rowHeight" 
          :loading="true && !noDataStatus"
          :no-data="noDataStatus"
          :fixed-shadow="false"
          :stop-propagation="true"
          ref="generalListTable">

          <win-table-column v-for="(keys, index) in columKeyArrs" :key="index" :width="columWidth[index]"
            :fixed="index == 0 ? true : false"
            :sortable="checkSupportSort(keys)"
            :prop="chooseSupportSortKey(keys)"
            >

            <!-- 列头 -->
            <template #header>
              <div class="general-list-header" :class="{'general-list-header-left': index != 0 }">

                <!-- 整体双行表头 -->
                <div v-if="shouldDoubleLine" class="general-list-header-double-line"> 
                  <!-- 有1个字段 -->
                  <div v-if="keys.length == 1" v-auto-font-size="titleAutoParam" class="header-text-class" :class="{'sort-hilight-status-class':shouldHilightColorWith(keys[0])}">{{ columnNames[index] }}</div>
                  <!-- 有2个字段 -->
                  <div v-else v-auto-font-size="titleAutoParam" class="general-list-header-double-line-content">
                    <div v-auto-font-size="titleAutoParam" class="header-text-class" :class="{'sort-hilight-status-class':shouldHilightColorWith(keys[0])}" v-if="showKeysMap[keys[0]] != 'shortnameblank'">{{ showKeysMap[keys[0]] }}</div>
                    <div v-auto-font-size="titleAutoParam" class="header-text-class" :class="{'sort-hilight-status-class':shouldHilightColorWith(keys[1])}" v-if="showKeysMap[keys[1]] != 'shortnameblank'">{{ showKeysMap[keys[1]] }}</div>
                  </div>
                </div>

                <!-- 整体单行表头 直接展示对应序列-->
                <div v-else v-auto-font-size="titleAutoParam" class="header-text-class">
                  <span :class="{ 'sort-hilight-status-class':shouldHilightColorWith(keys[0]) }" v-if="columnNames[index].split('/')[0] != 'shortnameblank'">{{ columnNames[index].split('/')[0] }}</span>
                  <span v-if="columnNames[index].indexOf('/') != -1 && columnNames[index].indexOf('shortnameblank') == -1">/</span>
                  <span v-if="columnNames[index].indexOf('/') != -1 && columnNames[index].split('/')[1] != 'shortnameblank'"" :class="{ 'sort-hilight-status-class':shouldHilightColorWith(keys[1]) }">{{ columnNames[index].split('/')[1] }}</span>
                </div>

                <!-- 排序标签 -->
                <div v-if="checkSupportSort(keys) ? true : false" class="general-list-header-sort">
                  <span class="win-table__sort-warpper">
                    <i class="win-table__sort-caret ascending"></i>
                    <i class="win-table__sort-caret descending"></i>
                  </span>
                </div>

                <!-- 可以滚动提示图标 -->
                <div v-if="haveScrollArrow && index == 3 && !isHorScrolled" class="scroll-icon">
                  <div class="arrow-more-view" >>></div>
                </div>

              </div>
            </template>

            <!-- 列内容 -->
            <template #default="slotProps">
              <div class="general-list-value">
                <!-- 第一行 -->
                <div class="label-text-class" v-auto-font-size="contentAutoParam" 
                  :class="{
                      'value-text-single':keys.length == 1 && showTwoLineValue,
                      [checkShowSpecialColorClass(keys[0], slotProps.row[keys[0]])]:true
                    }">{{ formatItemValue(keys[0], slotProps.row[keys[0]]) }}</div>
                
                <!-- 第二行 -->
                <div class="label-text-class" 
                  v-if="keys.length > 1"
                  :class="[checkShowSpecialColorClass(keys[1], slotProps.row[keys[1]])]"
                  v-auto-font-size="contentAutoParam">{{formatItemValue(keys[1], slotProps.row[keys[1]]) }}</div>
              </div>
            </template>
          </win-table-column>
          <!-- 插槽底部更多信息 -->
          <template #expand="slotProps" v-if="menuList && menuList.length > 0 && isHoldList">
            <div class="general-list-botom-menus" >
            <div class="general-list-botom-menus-container">
              <div v-for="(name, index) in menuList" class="general-list-botom-items" @lcick="menuClick(slotProps.row, name, index)">
                <div>{{ name }}</div> 
              </div>
            </div>
            <div class="general-list-botom-items-line-container">
                <div v-for="(name, index) in menuList.slice(1)" class="general-list-botom-items-line">|</div>
              </div>
            </div>
          </template>

          <!-- 加载中（组件使用时候设置该效果一直显示用于兼容安全区） -->
          <template #loading="slotProps">
            <div class="general-list-bottom-section">
            </div>
          </template>

          <!-- 无数据/无网络 -->
          <template #no-data="slotProps">
            <div class="general-list-temp-data"  :style="{height: listHeight - tableHeaderH + 'px', paddingBottom: 'var(--safeBottomHeight)'}" :class="[miniList ? 'no-data-mini-view' : 'no-data-view']">
              <div v-if="showNoNet">
                <div class="no-net-img-class"></div>
                <div class="no-data-notice">网络异常</div>
              </div>
            <div v-else>
                <div class="no-data-img-class"></div>
                <div class="no-data-notice">{{ noDataStr }}</div>
            </div>
            </div>
          </template>

        </win-table>
    </div>
</template>

<script>

import listDataVM from '@/views/winUIScroll/listDataVM.js';
import autoFontSize from '@/views/autoFont/autoFontSize.js';
import FontSizeManager from '@/views/autoFont/fontSizeManager.js';

export default {
  name: 'page-winUIScroll',
  directives: {
      autoFontSize
  },
  mixins: [listDataVM],
  data() {
      return {
        screenWidth: window.innerWidth, // 初始化屏幕宽度 // 初始化屏幕宽度
        titleAutoParam: {
          baseFontSize: 14,
          minFontSize: 8,
          maxFontSize: 14
        },
        contentAutoParam: {
          baseFontSize: 16,
          minFontSize: 8,
          maxFontSize: 16
        },
        columWidth: [], // 列宽度
        isHorScrolled: false, // 是否已经横向滚动
        loadAnimation: null,
        currY: 0, // 阻止点击事件冒泡
        currX: 0, // 阻止点击事件冒泡
      };
    },

    computed: {
      columnCount() {
        return this.columStyle.length; // 总列数
      },

      showTwoLineValue() {
        return this.columStyle.indexOf('2') != -1 || this.columStyle.indexOf(2) != -1; // 是否双行展示内容
      },

      rowHeight() {       
        return  this.showTwoLineValue ? 64 : 42; // 行高
      },

      haveScrollArrow() {        
        return  this.columStyle.length > 4; // 是否有滚动图标
      },

      // 表头是否双行展示
      shouldDoubleLine() {
        let lineTwo = false;
        if(!this.columnNames || this.columnNames.length == 0) {
          return lineTwo;
        }

        for (let i = 0; i < this.columnNames.length; i++) {
          // 去掉特殊字符，不参与宽度计算
          const name = this.columnNames[i].replace('shortnameblank', '');          
          const nameWidth = FontSizeManager.getInstance().getTextWidth(name, 14);
          const textMaxWidth = this.columWidthWithIndex(i, false); // 文字最大宽度
          if (nameWidth > textMaxWidth) { 
            lineTwo = true;
            console.log(`"${name}" has a length greater than ${this.columnWidth}`);
            break; // 找到后退出循环
          }
        }
        return lineTwo; 
      },

      // 表头的高度
      tableHeaderH(){
        return this.shouldDoubleLine ? 58 : 42;
      },
      // 侧滑指引更多图标
      arrowMoreSrc() {
        return arrowMore;
      },

    },

    watch: {},

    created() {
      
    },

    mounted() {
      this.loadLoadingData();
      this.listenDisplayChange(); // 监听屏幕变化
    },
  methods: {
    /**
       * 加载 loading UI
       */
       loadLoadingData(){
        // const params = {
        //   container: this.$refs.loading,
        //   renderer: 'svg',
        //   loop: true,
        //   autoplay: true,
        //   animationData: loadingData
        // };
        // this.loadingAnimation = bodymovin.loadAnimation(params);
      },


       /***
       * 屏幕变化处理逻辑
       * */
      listenDisplayChange: function () {
        // Theme.listenDisplayChangeEvent(()=>{}, this.pageForceRefresh);
      },

      /**
       * 屏幕强制刷新
       */
      pageForceRefresh() {
        this.screenWidth = window.innerWidth; // 屏幕宽度
        this.columWidth = this.columKeyArrs.map((item, index) => {
          return this.columWidthWithIndex(index);
        });
        console.log('【general-virtual-list】屏幕强制刷新', this.columWidth);
        this.$nextTick(() => {
          if(this.$refs.generalListTable && this.$refs.generalListTable.forceUpdate) {
            this.$refs.generalListTable.forceUpdate();
          }
        });
      },

        /**
       * 计算每一列 columnWidth
       * @param index 列数
       * @param isContainerWidth 是否是容器宽度(容器宽度需要加上 padding), false 代表文字最终展示宽度
       */
      columWidthWithIndex(index, isContainerWidth = true) {
        /* 
          备注：
          1.屏幕宽度最大显示 4 列.
          2.左右屏幕边距为 16px.
          3.每列的间隔是 16px, 用于兼容处理屏幕右侧可以滑动时候漏出第五列的场景.
          4.除第一列外每一列右侧都有一个 padding 16px
          5.第一列左侧有 padding 16px 边距, 右侧有 16padding  
          6.排序按钮固定宽度 12px
          7.每一列文字最终用于显示宽度都是需要 - 左右 padding -排序按钮宽度(根据当前列是否需要显示排序按钮决定)
        */

        const tableScreenMargin = 16 * this.screenWidth / 375; // table 屏幕边距
        const columnMargin = 16 * this.screenWidth / 375; // 每列间隔
        const sortBtnWidth = 12 * this.screenWidth / 375; // 排序按钮宽度


        const screenColums = this.columnCount > 4 ? 4 : this.columnCount; // 屏幕列数

        // 四列时候，用于显示的总列宽
        const totalShowWidth = this.screenWidth - tableScreenMargin * 2 - columnMargin * (screenColums - 1); // 单屏幕总显示宽度（文字+排序按钮） 屏幕宽度 - 左右padding
        // 平均每列宽度
        const minColumnWidth = totalShowWidth / screenColums; // 每列宽度
        
        const columnKey = this.columKeyArrs[index]; // 列 key
        const columnSupportSort = this.checkSupportSort(columnKey); // 是否支持排序
        let columnWidth = Math.max(totalShowWidth / this.columnCount, minColumnWidth); // 每列宽度取计算值与最小宽度的较大值
        const textShowWidth = columnWidth - (columnSupportSort ? sortBtnWidth : 0); //  用于文字展示的宽度,列宽-排序按钮宽度-左右 padding
        let showWidth = 0; // 实际每列容器宽度（文字+排序按钮+左右 padding）
        if(index == 0) {
          showWidth = columnWidth + columnMargin + tableScreenMargin; // 第一列宽度加上左padding + 右边 padding 
        }  else {
          showWidth = columnWidth + columnMargin; // 其他列宽度加上右边 padding
        }
        // 如果不是容器宽度，返回文字需要展示的宽度
        return isContainerWidth ? showWidth : textShowWidth;
        
      },

      horizontalScroll(event) {
        // 处理滚动事件
        this.isHorScrolled = event < -5;
      }
     
  },

}
</script>

<style lang="less">


/* stylelint-disable */

/** 列表整体样式 */
.general-list-container{
    font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","HarmonyOS Sans","Roboto","PingFang SC",sans-serif;
    width: 100%;
    overflow-y: hidden;
    // background-color: var(--primary_bg);
  } 
  .win-table__fixed-body-wrapper .win-table__body .win-table__td {
    background-color: var(--primary_bg);
  }
  .win-table__row,.win-table__header-row{
    background-color: var(--primary_bg);
  }
  div.win-table__td::after {
    border-bottom: 1px solid var(--list_line);
  }
  div.win-table__header-th::after {
    border-bottom: 1px solid var(--list_line);
  }

  /* 表头样式 */
  div.win-table__header-th{
    padding: 0;
    background-color: var(--primary_bg);
  }
  div.win-table__fixed-header-wrapper{
    padding: 0;
  }
  div.win-table__header-th:first-child {
    padding-left: 16px;
  }
  div.win-table__header-th:last-child {
    padding-right: 0;
  }
  
  .general-list-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 18PX;
    height: 100%;
    width: 100%;
    padding: 11PX 0;
    padding-right: 16px;
    position: relative; /** 滚动提示图标需要定位 */
  }
  .general-list-header-left{
    justify-content: flex-end;
  }
  
  
  .header-text-class {
    white-space: nowrap;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    flex-shrink: 0; /* 防止文本缩小 */
    width: 100%;
    color: var(--text_tertiary);
  }
  .general-list-header-double-line {
    width: 100%;
    overflow: hidden;
  }
  .general-list-header-double-line-content {
    width: 100%;
    overflow: hidden;
  }
  
  
  
  
  
  /** 表格内容样式 */
  div.win-table__td {
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--primary_bg);
  }
  div.win-table__td:first-child {
    padding-left: 16px;
    background-color: var(--primary_bg);
  }
  div.win-table__td:last-child {
    padding-right: 0;
  }
  .win-table-column__cell {
    width: 100%;
  }
  .general-list-value {
    width: 100%;
    padding: 11px 0;
    padding-right: 16px;
    overflow: hidden;
  }
  
  .label-text-class {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    line-height: 20px;
    font-size: 16px;
    color: var(--text_primary);
  }
  .value-text-single {
    line-height: 42px;
  }
  
  /** 股票点击后拓展菜单的样式 */
  .general-list-botom-menus {
    height: 56px;
    background-color: var(--page_bg);
    padding-bottom: 8px;
    width: 100vw;
    position: relative;
  
    .general-list-botom-menus-container {
      background-color:  var(--primary_bg);
      font-size: 14px;
      line-height: 48px;
     
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  
    .general-list-botom-items {
      min-width: 44px;
      text-align: center;
    }
  
    .general-list-botom-items-line-container {
      position: absolute;
      top: 12px;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 100%;
    }
    .general-list-botom-items-line {
      height: 24px;
    }
  
  }
  
  /* 排序图标 样式 */
  .win-table .ascending .win-table__sort-caret.ascending {
      border-bottom-color: var(--brand);
  }
   
  .win-table .descending .win-table__sort-caret.descending {
      border-top-color: var(--brand);
  }
  .win-table .win-table__sort-caret.ascending  {
    border-bottom-color: var(--text_disabled);
  }
  .win-table .win-table__sort-caret.descending {
    border-top-color: var(--text_disabled);
  }
  .sort-hilight-status-class {
    color: var(--brand);
  
  }
  .win-table .win-table__sort-caret {
      border: 3.5px solid transparent;
  }
  .win-table .win-table__sort-warpper {
    top: 1px;
    height: 19px;
    width: 12px;
    flex-shrink: 0;
  }
  
  
  /* 滚动提示图标 */
  .scroll-icon {
    position: absolute;
    right: 2px;
    height: 100%;
    width: 12px;
    display: flex;
    align-items: center;
    .arrow-more-view {
      width: 8px;
      height: 8px;
    }
  }
  
  
  
  
  /** 不同状态的匹配样式 */
  .value-text-up{
    color: var(--text_rise) !important;
  }
  .value-text-down {
    color: var(--text_drop) !important;
  }
  .value-text-buy {
    color: var(--text_buy) !important;
  }
  .value-text-sell{
    color: var(--text_sell) !important;
  }
  
  /** 底部安全区兼容 */
  .general-list-bottom-section{
    height: var(--safeBottomHeight);
    background-color: var(--primary_bg);
  }
  .loading-section {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    .loading-text {
      font-size:14px;
      color:var(--text_tertiary);
      margin-top:8px;
    }
  }
  
  /** 无数据/无网络逻辑 */
  // .general-list-temp-data{
  //   background-color: red;
  //   height: var(--safeBottomHeight);
  // }
  .no-data-view {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .no-data-img-class {
      width: 220px;
      height: 170px;
      background: var(--empty_data_default);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .no-net-img-class {
      width: 220px;
      height: 170px;
      background: var(--img_network_failure);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .no-data-notice {
      margin-top: 16px;
      font-size: 14px;
      color: var(--text_tertiary);
      text-align: center;
     }
  }

  .no-data-mini-view{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .no-data-img-class {
      width: 154px;
      height: 119px;
      background: var(--empty_data_default);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .no-net-img-class {
      width: 154px;
      height: 119px;
      background: var(--img_network_failure);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .no-data-notice {
      margin-top: 16px;
      font-size: 14px;
      color: var(--text_tertiary);
      text-align: center;
     }
  }
</style>
